<template>
  <a-modal
    :render-to-body="!isFullscreen"
    :popup-container="isFullscreen ? mainBox : 'body'"
    v-bind="$props"
    @cancel="cancel"
  >
    <template #title>
      <slot name="title"></slot>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { isFullscreen } from '@/common/hooks/full-screen';

  const emit = defineEmits(['cancel']);
  const mainBox = ref();
  mainBox.value = document.querySelector('main');
  const cancel = () => {
    emit('cancel');
  };
</script>
